<template>
	<cu-custom :isBack="true">
		<template #title>组任务总览</template>
	</cu-custom>
	
	<scroll-view scroll-x class="bg-white nav text-center" style="width:100%;position: fixed;z-index: 11;">
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input
					:enable-native="false"
					type="text"
					v-model="searchValue"
					placeholder="输入关键词搜索"
					confirm-type="search"
					@confirm="handleSearch"
					@blur="handleSearch"
					@input="inputChange"
				/>
			</view>
		</view>
		
		<view class="filter-form-bar">
			<FilterSearch @select="handleFormSelect">
				{{ filterFormText }}
			</FilterSearch>
		</view>
		
		<view class="filter-bar">
			<view class="">
				{{ currentAreaFilter }}
			</view>
			<view class="filter-btn" @click="handleAreaFilter">
				<text class="cuIcon-search"></text>
				<text>筛选</text>
			</view>
		</view>
		
		<view class="flex">
			<view
				class="cu-item flex-sub"
				:class="item.value === TabCur? 'text-blue cur' : ''"
				v-for="item in tabNav"
				:key="item.value"
				@tap="tabSelect"
				:data-id="item.value"
			>
				<text>{{ item.label }}</text>
				<text class="text-orange">{{ item.labelCount }}</text>
			</view>
		</view>
		
	</scroll-view>
	
	<view class="page-content">
		
		<view v-if="dataList.length > 0" v-for="(item, index) in dataList" :key="index">
			<Mission 
				:id="item.id"
				:title="item.title"
				:content="item.describe"
				:date="item.startTime"
				:status="item.status"
			/>
		</view>
		
		<view v-else class="empty">
			<image src="../../static/images/empty-message.png" mode="aspectFit"></image>
		</view>
		
	</view>
	
	<view class="cu-load text-gray" :class="status === 'loading' ? 'loading' : 'nomore'"></view>
	
	<ListView ref="listview" />
	
	<Modal ref="areaModal">
		<view
			class="padding-xl"
			style="overflow-y: scroll;"
		>
			<view class="filter-select-box" v-for="(item, index) in filterSelection" :key="index">
				<view class="filter-title">{{ "区域" + (index + 1) }}</view>
				<uni-data-select
					v-model="item.value"
					:localdata="item.range"
					@change="(e: any) => areaFilterChange(item, e, index)"
				></uni-data-select>
			</view>
			
			<view class="custom-btn" @click="areaFilterConfirm">确认</view>
		</view>
	</Modal>
	
</template>

<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app"
import { onMounted, reactive, ref, type Ref } from 'vue';
import { onReachBottom } from "@dcloudio/uni-app";
import Mission from "./components/Mission.vue"
import { getMission, getMissionList, queryGroupTree, queryMissionByGroup } from "@/api/mission.js"
import ListView from "@/components/ListView.vue"
import Modal from "@/components/Modal.vue"
import { queryFormList } from "@/api/mission.js"
import { ISelector } from "../../interface/ISelector"
import FilterSearch from "@/components/FilterSearch.vue"

interface IMission {
	title: string
	content: string
	date: string
}
const tabNav: Ref<any[]>= ref([
	{
		value: 2,
		label: "未确认",
		labelCount: "0"
	},
	{
		value: 4, // 2 - 4
		label: "进行中",
		labelCount: "0"
	},
	{
		value: 5,
		label: "已完成",
		labelCount: "0"
	},
	{
		value: 7,
		label: "已忽略",
		labelCount: "0"
	}
])

const TabCur:Ref<number> = ref(null)
const tabSelect = (e:any):void => {
	if (TabCur.value !== e.currentTarget.dataset.id) {
		TabCur.value = e.currentTarget.dataset.id
	} else {
		TabCur.value = null
	}
	loadData("refresh")
}

const searchValue:Ref<string> = ref("")
const currentAreaFilter: Ref<string> = ref("当前没有筛选区域")
const currentFormFilter: Ref<string> = ref("当前没有筛选表单")
const areaModal = ref(null) // 弹出框
const filterSelection: Ref<any[]> = ref([])
const listview = ref()
const area_id: Ref<number> = ref(null)
const filterFormText: Ref<string> = ref("点击筛选表单")
let filterFormId

const formListDataValue: Ref<string> = ref(null)
const formListData = ref([] as ISelector[])

let searchable = false
const inputChange = ():void => {
	searchable = true
}
const handleSearch = ():void => {
	if (!searchable) return
	searchable = false
	loadData("refresh")
}

const handleAreaFilter = (): void => {
	areaModal.value.show()
}

const status:Ref<string> = ref("loadmore")
let currPage:number = 1
const dataList:Ref<any[]> = ref([])
const loadData = (type:string = 'default', insen = false):void => {
	if (type === "refresh") {
		currPage = 1
		status.value = "loadmore"
		// 无感刷新
		!insen ? dataList.value = [] : ""
	}
	if (status.value === 'loading' || status.value === 'nomore') return
	status.value = "loading"
	queryMissionByGroup({
		pageNum: currPage++,
		pageSize: 10,
		organizaId: area_id.value,
		schoolName: searchValue.value,
		formId: filterFormId,
		status: TabCur.value
	}).then((res: any) => {
		const rows = res.rows
		if (type === "refresh") {
			dataList.value = [...res.rows]
		} else {
			dataList.value.push(...res.rows)
		}
		tabNav.value[0].labelCount = res.count[2]
		tabNav.value[1].labelCount = res.count[4]
		tabNav.value[2].labelCount = res.count[5]
		tabNav.value[3].labelCount = res.count[7]
		
		status.value = rows.length < 10 ? "nomore" : "loadmore"
	})
}



const areaFilterChange = (item, e, index) => {
	console.log(item, e, index)
	let children = null
	for (let i of item.range) {
		if (i.value === e) {
			children = i.children
		}
	}
	if (children) {
		filterSelection.value[index + 1].range = Array.from(children, (area: any) => ({ value: area.id, text: area.label, children: area.children }))
		filterSelection.value[index + 1].value = -1
		for (let j = index + 2; j < filterSelection.value.length; j++) {
			filterSelection.value[j].range = []
			filterSelection.value[j].value = -1
		}
	}
	console.log(children)
}
// 确认筛选
const areaFilterConfirm = () => {
	console.log(filterSelection.value)
	let last_area_id = null
	let area_text = ""
	
	for (let v of filterSelection.value) {
		if (v.value !== -1) {
			last_area_id = v.value
			const checkedItem = v.range.find((item) => item.value === v.value)
			area_text += checkedItem.text + " / "
		}
	}
	area_text = area_text.substring(0, area_text.length - 3)
	currentAreaFilter.value = area_text
	area_id.value = last_area_id
	areaModal.value.hide()
	loadData("refresh")
}

// 确认选择表单筛选
const handleFormSelect = (item) => {
	filterFormText.value = item.text
	filterFormId = item.value
	loadData("refresh")
}

const tree2Filter = (tree): any[] => {
	const filter = {
		value: -1,
		range: Array.from(tree, (e: any) => ({ value: e.id, text: e.label, children: e.children }))
	}
	if (tree[0].children) {
		return [filter, ...tree2Filter(tree[0].children)]
	}
	return [filter]
}
const init = () => {
	queryGroupTree()
		.then(res => {
			// console.log("GroupTree", res)
			filterSelection.value = tree2Filter(res)
			for (let i = 1; i < filterSelection.value.length; i++) {
				filterSelection.value[i].range = []
			}
			area_id.value = res[0].id
			// console.log(filterSelection.value)
			loadData("refresh", true)
		})
	// 这里需要改成能搜索懒加载的组件
	
}


onReachBottom(() => {
	loadData()
})
onShow(() => {
	init()
	// loadData("refresh", true)
})

</script>

<style lang="stylus" scoped>
body
	min-height: 100vh
	background-color: #FFFFFF
.page-content
	padding-top 400rpx
	.empty
		width: 100%
		text-align: center
		image
			width: 100%
	
// .cu-item
// 	margin: 0 40rpx
.filter-bar
	height: 88rpx
	display: flex
	justify-content: space-between
	align-items: center
	padding 0 52rpx
	border-bottom 2rpx solid #eee
	.filter-btn
		background-color: #3974df
		color: #fff
		padding: 8rpx 16rpx
		border-radius: 6rpx

.filter-select-box
	margin-bottom: 60rpx
	.filter-title
		border-left: #3974df solid 8rpx
		text-align: left
		margin-bottom: 12rpx
		padding-left: 12rpx

.custom-btn
	background-color: #3974df
	color: #fff
	padding: 16rpx 16rpx
	border-radius: 6rpx
		
</style>
